<div class="panel panel-primary">
  <div class="panel-header">{{'recentlyDocuments' | translate}}</div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item" *ngFor="let doc of documents">
      <a [routerLink]="['/documents', doc.id]" class="item-title text-capitalize">{{doc.name}}</a>
      <div class="item-content">
        <span class="badge badge-primary cursor-pointer" *ngIf="doc.cpdf"
              tooltip="{{'cpdfTagTip' | translate}}" triggers="click">{{'cpdfTag' | translate}}</span>
        <span class="badge badge-primary cursor-pointer" *ngIf="doc.drm"
              tooltip="{{'drmTagTip' | translate}}" triggers="click">{{'drmTag' | translate}}</span>
        <span class="dropdown" *ngIf="doc.versionId || doc.fileLink" dropdown>
          <button class="btn btn-secondary dropdown-toggle btn-sm" type="button" dropdownToggle>
            {{'more' | translate}}
          </button>
          <div class="dropdown-menu" *dropdownMenu>
            <a class="dropdown-item" *ngIf="doc.versionId"
               [routerLink]="['/document', doc.id, 'versions', doc.versionId]">{{'versions' | translate}}</a>
            <a class="dropdown-item" *ngIf="doc.fileLink" href="{{doc.fileLink}}" target="_blank">{{'openLink' | translate}}</a>
          </div>
        </span>
      </div>
    </li>
  </ul>
</div>
